import React, { Component, Fragment } from "react";
import { CSSTransition } from "react-transition-group";
// 导入Time
import Time from "@/components/Time";

//  导入styled
import styled from "styled-components";
// 导入css
import "@/assets/css/Index.css";
// 导入子组件
import NormalLogin from "./NormalLogin";
import MobileLogin from "./MobileLogin";

// 导入animate
// import "animate.css";
import '@/assets/css/animate.min.css'
import { Button } from "antd";
// 导入antd
class Login extends Component {
  state = {
    loginOrReg: true,
    // 加载按钮
    loadings: [],
    // 是否显示
    isShow: true,
  };

  handleToggole = () => {
    this.setState(() => {
      return {
        isShow: !this.state.isShow,
      };
    });
  };

  // 切换按钮效果
  enterLoading = (index) => {
    this.setState(({ loadings }) => {
      const newLoadings = [...loadings];
      newLoadings[index] = true;

      return {
        loadings: newLoadings,
      };
    });
    setTimeout(() => {
      this.setState({
        loginOrReg: !this.state.loginOrReg,
        isShow: !this.state.isShow,
      });
      this.setState(({ loadings }) => {
        const newLoadings = [...loadings];
        newLoadings[index] = false;

        return {
          loadings: newLoadings,
        };
      });
    }, 1000);
    setTimeout(() => {
      this.setState({ isShow: !this.state.isShow });
    }, 2000);
  };
  componentDidMount(){
    //防止翻墙
    if(localStorage.getItem('jwt'))
    localStorage.removeItem('jwt')
  }
  render() {
    const { loadings } = this.state;
    return (
      <div className={this.state.loginOrReg ? "all" : "all1"}>
        <div className="time">
          <Fragment>
            <CSSTransition
              in={this.state.isShow}
              timeout={4000}
              classNames={{
                enter: "animate__animated",
                exit: "animate__animated animate__backInDown",
              }}
            >
              <div>
                <Time />
                <img
                  src={require("@/assets/image/1.gif").default}
                  alt="img"
                  className={this.state.loginOrReg ? "imgLeft img" : "imgRight img"}
                />
              </div>
            </CSSTransition>
          </Fragment>
        </div>
        <Main className={this.state.loginOrReg ? "loginRight login" : "loginLeft login"}>
          {this.state.loginOrReg ? <NormalLogin /> : <MobileLogin />}
        </Main>
        <div className={this.state.loginOrReg ? "btnRight" : "btnLeft"}>
          <Fragment>
            <CSSTransition
              in={this.state.isShow}
              timeout={4000}
              classNames={{
                enter: "animate__animated",
                // enterActive: "animate__animated  animate__backInDown",
                exit: "animate__animated animate__bounceOut",
                // exitActive: "animate__animated",
              }}
            >
              <div>
                <Button
                  type="primary"
                  loading={loadings[0]}
                  onClick={() => this.enterLoading(0)}
                  size="large"
                >
                  {this.state.loginOrReg ? "短信登录" : "账号登录"}
                </Button>
              </div>
            </CSSTransition>
          </Fragment>
        </div>
        <div
          className={
            this.state.loginOrReg ? "textLeft text " : "textRight text"
          }
        >
          <Fragment>
            <CSSTransition
              in={this.state.isShow}
              timeout={4000}
              // {/*  classNames：class样式类名 */}
              classNames={{
                exit: "animate__animated animate__backInUp",
              }}
            >
              <div>
                <p>
                  欢迎您来到bug超多的后台管理系统（制作人-
                  <span>唐夏禹、钟铭</span>）
                </p>
              </div>
            </CSSTransition>
          </Fragment>
        </div>
      </div>
    );
  }

}

const Main = styled.div`
position: absolute;
  margin: 300px 0 0 900px;
  width: 400px;
  background-color: #fff;
  padding: 30px;
  border-radius: 14px;
  opacity: 0.8;
  border: 1px solid #999;
`;

export default Login;
